<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>数据分析</title>
    <link rel="stylesheet" href="node_modules/angular-material/angular-material.css">
    <style>
        body {
            background-color: #f9f9f9;
        }

        md-tabs-wrapper md-prev-button md-icon,
        md-tabs-wrapper md-next-button md-icon {
            display: none;
        }
        .md-tab{
            padding: 12px 10px;
        }
    </style>
</head>

<body ng-app="demoApp">
    <div ng-controller="DemoCtrl" ng-cloak style="height: 100%">
        <md-content layout="row" style="height: 100%">
            <div flex="15" layout="column">
                <md-card md-theme="{{ showDarkTheme ? 'dark-grey' : 'default' }}" md-theme-watch style="height: 100%;margin-right: 4px">
                    <md-tabs md-dynamic-height md-border-bottom>
                        <md-tab label="我的数据">
                            <md-content class="md-padding">
                                <h1 class="md-display-2">我的数据</h1>
                                <p></p>
                            </md-content>
                        </md-tab>
                        <md-tab label="示例数据">
                            <md-content class="md-padding">
                                <h1 class="md-display-2">示例数据</h1>
                                <p></p>
                            </md-content>
                        </md-tab>
                    </md-tabs>
                </md-card>
            </div>
            <div flex="85" layout="column" style="position: relative;background: #f9f9f9;">
                <div>
                    <md-card layout="column" style="margin-bottom: 0;background-color: #fff;margin-left: 4px">
                        <md-card-title style="padding:0;max-height:140px" layout="column">
                            <div style="height: 32px;min-height:32px;width:100%;padding:8px 0;background-color: #f9f9f9;border-bottom: 1px solid #dcdcdc;">

                                <span style="display:inline-block; border:1px solid #cdcdcd;height: 30px;border-left: none;border-bottom: none;padding: 5px 8px;line-height: 30px;background-color: rgb(255,255,255);">拖拽模式</span>
                                <div style="position: absolute;display:inline-block;right: 14px;">
                                    <md-button class="md-raised" style="min-height: 30px;line-height: 30px;margin: 0;background-color: #999;color: white;min-width: 60px;">保存</md-button>
                                </div>
                            </div>
                            <div layout="row" style="height: 90px;min-height:90px;border-bottom:1px solid #dcdcdc">
                                <div layout="column" flex=50>
                                    <div layout="row" style="padding: 8px;height: 48px;line-height: 32px;text-align: right;">
                                        <label for="" style="width: 60px">列:&nbsp;&nbsp;</label>
                                        <span flex=90 style="border:1px dashed #CCC"></span>
                                    </div>
                                    <div layout="row" style="padding: 8px;height: 48px;line-height: 32px;text-align: right;">
                                        <label for="" style="width: 60px">标记:&nbsp;&nbsp;</label>
                                        <span flex=90 style="border:1px dashed #CCC"></span>
                                    </div>
                                </div>
                                <div layout="column" flex=50>
                                    <div layout="row" style="padding: 8px;height: 48px;line-height: 32px;text-align: right;">
                                        <label for="" style="width: 60px">行:&nbsp;&nbsp;</label>
                                        <span flex=90 style="border:1px dashed #CCC"></span>
                                    </div>
                                    <div layout="row" style="padding: 8px;height: 48px;line-height: 32px;text-align: right;">
                                        <label for="" style="width: 60px">筛选:&nbsp;&nbsp;</label>
                                        <span flex=90 style="border:1px dashed #CCC"></span>
                                    </div>
                                </div>
                            </div>
                        </md-card-title>
                    </md-card>
                </div>
                <div layout="row">
                    <md-card flex=100 style="margin-top: 0;position: absolute;top: 148px;bottom:0;left: 0;right:128px;margin-left: 4px">
                        <div layout-align="center center">
                            <h1>请将左侧维度、度量拖入建模区（列、行、标记）</h1>
                        </div>
                    </md-card>
                    <md-card style="margin-top: 0;position: absolute;top: 148px;bottom:0;right: 0;width: 120px;">
                        <md-tabs style="font-size: 10px">
                            <md-tab label="主要" style="width: 60px;padding: 12px 0">
                                <md-content class="md-padding">
                                    <p>主要</p>
                                </md-content>
                            </md-tab>
                            <md-tab label="全部">
                                <md-content class="md-padding">
                                    <p>全部</p>
                                </md-content>
                            </md-tab>
                        </md-tabs>
                    </md-card>
                </div>
            </div>
        </md-content>
    </div>
    <script src="node_modules/angular/angular.js"></script>
    <script src="node_modules/angular-animate/angular-animate.js"></script>
    <script src="node_modules/angular-aria/angular-aria.js"></script>
    <script src="node_modules/angular-material/angular-material.js"></script>
    <script>
        angular
            .module('demoApp', ['ngMaterial'])
            .controller('DemoCtrl', function ($scope) {

            })
    </script>
</body>

</html>